<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" collection="contacts" field="name,tel,addr" :page-size="10">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
        <uni-list>
          <uni-list-item class="" v-for="(item, index) in data" :key="index"  showArrow :clickable="true" @longpress.native="rmItem(item._id)" @click="handleItemClick(item._id) ">
                   <template v-slot:header>
                        <view class="uni-title">{{item.name}}</view>
                    </template>
                    <template v-slot:body>
                        <view class="uni-list-box">
                            <view class="uni-content">
                                <view class="uni-title-sub uni-ellipsis-2">{{item.addr}}</view>
                                <view class="uni-note">{{item.tel}}</view>
                            </view>
                        </view>
                    </template>

          </uni-list-item>
        </uni-list>
      </view>
<!-- 	  <view>
		  <uni-list>
		  	<uni-list-item v-for="" :key="" :title="" :note="" :rightText=""></uni-list-item>
		  </uni-list>
	  </view> -->
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
	onShow() {

	},
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id,
		  events:{
			  // 监听数据修改后, 刷新当前页面数据
			  refreshData: () => {
			    this.$refs.udb.loadData({
			      clear: true
			    })
			  }
		  }
        })
		
      },
      fabClick() {
        // 打开新增页面
        uni.navigateTo({
          url: './add',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      },
	  rmItem(id){
		  this.$refs.udb.remove(id)
	  }
    }
  }
</script>
<style lang="scss" scoped>
$uni-bg-color:#ffffff;
$uni-border-color:#e5e5e5;
.uni-list {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	background-color: $uni-bg-color;
	position: relative;
	flex-direction: column;
}

.uni-list--border {
	position: relative;
	/* #ifdef APP-NVUE */
	border-top-color: $uni-border-color;
	border-top-style: solid;
	border-top-width: 0.5px;
	border-bottom-color: $uni-border-color;
	border-bottom-style: solid;
	border-bottom-width: 0.5px;
	/* #endif */
	z-index: -1;
}

/* #ifndef APP-NVUE */

.uni-list--border-top {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: $uni-border-color;
	z-index: 1;
}

.uni-list--border-bottom {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 1px;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	background-color: $uni-border-color;
}

/* #endif */
</style>
